import React, { useRef, useState } from 'react';
import { useFrame, useThree } from '@react-three/fiber';
import { Text, Box, Sphere, Cylinder, Cone } from '@react-three/drei';
import type { DatingProfile } from '../types';
import * as THREE from 'three';

interface FemaleCharacterProps {
  profile: DatingProfile;
  position: [number, number, number];
  onClick: () => void;
  scale?: number;
}

export const FemaleCharacter3D: React.FC<FemaleCharacterProps> = ({
  profile,
  position,
  onClick,
  scale = 1
}) => {
  const characterRef = useRef<THREE.Group>(null);
  const [hovered, setHovered] = useState(false);
  const [clicked, setClicked] = useState(false);
  const { camera } = useThree();

  // Animation
  useFrame((state) => {
    if (characterRef.current) {
      // Graceful swaying animation
      characterRef.current.rotation.y = Math.sin(state.clock.elapsedTime * 0.5) * 0.05;
      
      // Delicate breathing effect
      const breathScale = 1 + Math.sin(state.clock.elapsedTime * 1.8) * 0.01;
      characterRef.current.scale.set(scale * breathScale, scale * breathScale, scale * breathScale);
      
      // Face the camera when hovered
      if (hovered && camera) {
        characterRef.current.lookAt(camera.position);
      }
    }
  });

  const handleClick = () => {
    setClicked(true);
    setTimeout(() => setClicked(false), 200);
    onClick();
  };

  const handlePointerOver = () => {
    setHovered(true);
    document.body.style.cursor = 'pointer';
  };

  const handlePointerOut = () => {
    setHovered(false);
    document.body.style.cursor = 'default';
  };

  // Female styling
  const skinColor = '#FDBCB4';
  const hairColor = '#8B4513';
  const dressColor = '#FF69B4';
  const accentColor = '#FFB6C1';
  const shoeColor = '#DC143C';

  return (
    <group 
      ref={characterRef}
      position={position}
      onClick={handleClick}
      onPointerOver={handlePointerOver}
      onPointerOut={handlePointerOut}
    >
      {/* 女性身体构造 - 曲线美 */}
      
      {/* 连衣裙上身 - A字型 */}
      <Cone
        position={[0, 0.65, 0]}
        args={[0.35, 0.5, 8]}
        castShadow
      >
        <meshStandardMaterial color={dressColor} />
      </Cone>

      {/* 裙摆 */}
      <Cone
        position={[0, 0.3, 0]}
        args={[0.45, 0.35, 8]}
        castShadow
      >
        <meshStandardMaterial color={dressColor} />
      </Cone>

      {/* 腰带装饰 */}
      <Cylinder
        position={[0, 0.48, 0]}
        args={[0.32, 0.32, 0.04]}
        castShadow
      >
        <meshStandardMaterial color={accentColor} />
      </Cylinder>

      {/* 纤细的手臂 */}
      <Cylinder
        position={[-0.28, 0.7, 0]}
        args={[0.05, 0.04, 0.4]}
        rotation={[0, 0, 0.1]}
        castShadow
      >
        <meshStandardMaterial color={skinColor} />
      </Cylinder>
      <Cylinder
        position={[0.28, 0.7, 0]}
        args={[0.05, 0.04, 0.4]}
        rotation={[0, 0, -0.1]}
        castShadow
      >
        <meshStandardMaterial color={skinColor} />
      </Cylinder>

      {/* 小巧的手 */}
      <Sphere position={[-0.35, 0.5, 0]} args={[0.06]} castShadow>
        <meshStandardMaterial color={skinColor} />
      </Sphere>
      <Sphere position={[0.35, 0.5, 0]} args={[0.06]} castShadow>
        <meshStandardMaterial color={skinColor} />
      </Sphere>

      {/* 修长的腿部 */}
      <Cylinder
        position={[-0.08, 0.08, 0]}
        args={[0.05, 0.06, 0.16]}
        castShadow
      >
        <meshStandardMaterial color={skinColor} />
      </Cylinder>
      <Cylinder
        position={[0.08, 0.08, 0]}
        args={[0.05, 0.06, 0.16]}
        castShadow
      >
        <meshStandardMaterial color={skinColor} />
      </Cylinder>

      {/* 高跟鞋 */}
      <group position={[-0.08, 0.02, 0]}>
        <Box args={[0.1, 0.04, 0.18]} castShadow>
          <meshStandardMaterial color={shoeColor} metalness={0.5} />
        </Box>
        <Box position={[0, -0.04, -0.06]} args={[0.02, 0.08, 0.02]} castShadow>
          <meshStandardMaterial color={shoeColor} metalness={0.8} />
        </Box>
      </group>
      <group position={[0.08, 0.02, 0]}>
        <Box args={[0.1, 0.04, 0.18]} castShadow>
          <meshStandardMaterial color={shoeColor} metalness={0.5} />
        </Box>
        <Box position={[0, -0.04, -0.06]} args={[0.02, 0.08, 0.02]} castShadow>
          <meshStandardMaterial color={shoeColor} metalness={0.8} />
        </Box>
      </group>

      {/* 精致的头部 - 椭圆脸型 */}
      <Sphere
        position={[0, 1.05, 0]}
        args={[0.15, 0.18, 0.14]}
        castShadow
      >
        <meshStandardMaterial color={skinColor} />
      </Sphere>

      {/* 长发造型 */}
      <group>
        {/* 主发型 */}
        <Sphere
          position={[0, 1.15, -0.08]}
          args={[0.17, 0.2, 0.15]}
          castShadow
        >
          <meshStandardMaterial color={hairColor} roughness={0.8} />
        </Sphere>
        
        {/* 侧发 */}
        <Sphere
          position={[-0.14, 1.05, -0.1]}
          args={[0.12, 0.18, 0.12]}
          castShadow
        >
          <meshStandardMaterial color={hairColor} roughness={0.8} />
        </Sphere>
        <Sphere
          position={[0.14, 1.05, -0.1]}
          args={[0.12, 0.18, 0.12]}
          castShadow
        >
          <meshStandardMaterial color={hairColor} roughness={0.8} />
        </Sphere>
        
        {/* 刘海 */}
        <Box
          position={[0, 1.18, 0.05]}
          args={[0.25, 0.08, 0.08]}
          castShadow
        >
          <meshStandardMaterial color={hairColor} roughness={0.8} />
        </Box>
      </group>

      {/* 精致的面部特征 */}
      {/* 大眼睛 */}
      <Sphere position={[-0.05, 1.08, 0.12]} args={[0.015]} castShadow>
        <meshStandardMaterial color="#000000" />
      </Sphere>
      <Sphere position={[0.05, 1.08, 0.12]} args={[0.015]} castShadow>
        <meshStandardMaterial color="#000000" />
      </Sphere>

      {/* 眼睛高光 */}
      <Sphere position={[-0.045, 1.085, 0.125]} args={[0.008]}>
        <meshStandardMaterial color="#FFFFFF" />
      </Sphere>
      <Sphere position={[0.055, 1.085, 0.125]} args={[0.008]}>
        <meshStandardMaterial color="#FFFFFF" />
      </Sphere>

      {/* 细眉 */}
      <Box position={[-0.05, 1.12, 0.11]} args={[0.025, 0.005, 0.003]}>
        <meshStandardMaterial color={hairColor} />
      </Box>
      <Box position={[0.05, 1.12, 0.11]} args={[0.025, 0.005, 0.003]}>
        <meshStandardMaterial color={hairColor} />
      </Box>

      {/* 小巧的鼻子 */}
      <Sphere position={[0, 1.04, 0.13]} args={[0.012]} castShadow>
        <meshStandardMaterial color={skinColor} />
      </Sphere>

      {/* 樱桃小嘴 */}
      <Sphere position={[0, 0.98, 0.12]} args={[0.018, 0.008, 0.008]}>
        <meshStandardMaterial color="#DC143C" />
      </Sphere>

      {/* 女性配饰 */}
      {/* 耳环 */}
      <group position={[-0.16, 1.05, 0]}>
        <Sphere args={[0.02]} castShadow>
          <meshStandardMaterial color="#FFD700" metalness={0.9} roughness={0.1} />
        </Sphere>
        <Cylinder position={[0, -0.04, 0]} args={[0.005, 0.005, 0.04]} castShadow>
          <meshStandardMaterial color="#FFD700" metalness={0.9} />
        </Cylinder>
      </group>
      <group position={[0.16, 1.05, 0]}>
        <Sphere args={[0.02]} castShadow>
          <meshStandardMaterial color="#FFD700" metalness={0.9} roughness={0.1} />
        </Sphere>
        <Cylinder position={[0, -0.04, 0]} args={[0.005, 0.005, 0.04]} castShadow>
          <meshStandardMaterial color="#FFD700" metalness={0.9} />
        </Cylinder>
      </group>
      
      {/* 项链 */}
      <Cylinder
        position={[0, 0.85, 0.08]}
        args={[0.13, 0.13, 0.008]}
        castShadow
      >
        <meshStandardMaterial 
          color="#FFD700" 
          metalness={0.9} 
          roughness={0.1}
          transparent
          opacity={0.9}
        />
      </Cylinder>

      {/* 手镯 */}
      <Cylinder
        position={[-0.35, 0.48, 0]}
        args={[0.035, 0.035, 0.015]}
        rotation={[Math.PI / 2, 0, 0]}
        castShadow
      >
        <meshStandardMaterial color="#C0C0C0" metalness={0.9} />
      </Cylinder>

      {/* Hover name display */}
      {hovered && (
        <group position={[0, 1.5, 0]}>
          <Text
            fontSize={0.12}
            color="#FF1493"
            anchorX="center"
            anchorY="middle"
            castShadow
          >
            {profile.name}
          </Text>
          <Text
            position={[0, -0.15, 0]}
            fontSize={0.08}
            color="#666"
            anchorX="center"
            anchorY="middle"
          >
            {profile.age}岁 • {profile.occupation}
          </Text>
        </group>
      )}

      {/* Hover glow */}
      {hovered && (
        <Sphere position={[0, 0.6, 0]} args={[0.9]}>
          <meshLambertMaterial
            color="#FFB6C1"
            transparent
            opacity={0.15}
            side={THREE.BackSide}
          />
        </Sphere>
      )}

      {/* Click hearts */}
      {clicked && (
        <>
          {Array.from({ length: 6 }, (_, i) => (
            <Text
              key={i}
              position={[
                (Math.random() - 0.5) * 1.5,
                0.8 + Math.random() * 0.6,
                (Math.random() - 0.5) * 1.5
              ]}
              fontSize={0.15}
              color="#FF1493"
              anchorX="center"
              anchorY="middle"
            >
              💕
            </Text>
          ))}
        </>
      )}
    </group>
  );
};